<template>
  <div>
    <el-skeleton animated :rows="7" :loading="loading">
      <template #default>
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="admin"></svgIcon>
              姓名
            </template>
            张廷智
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="sex"></svgIcon>
              性别
            </template>
            男
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="phone"></svgIcon>
              手机号
            </template>
            18899990000
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions direction="vertical" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="address"></svgIcon>
              居住地
            </template>
            上海浦东新区唐镇
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="tag"></svgIcon>
              标签
            </template>
            <el-tag size="small" style="margin-left:10px" effect="dark" v-for="item in tags" :key="item.label" :type="item.type">{{item.label}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <svgIcon name="age"></svgIcon>
              年龄
            </template>
            24
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-skeleton>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import svgIcon from '@/components/svg/index.vue'

export default defineComponent({
  components:{
    svgIcon,
  },
  setup() {
    const list = ref([]);
    const loading = ref(true);
    const tags = ref([
  { type: "", label: "善良" },
  { type: "success", label: "好学" },
  { type: "info", label: "幽默" },
  { type: "danger", label: "旅游" },
  { type: "warning", label: "追剧" }
]);
    setTimeout(() => {
      list.value = [
        { name: "语文", id: 1 },
        { name: "数学", id: 2 },
      ];
      loading.value = false;
    }, 1000);
    return {
      list,
      loading,
      tags
    };
  },
});
</script>
